import React, {Component} from 'react';
import echarts from 'echarts'
import '../css/LeftTop.css'

class LeftBottom extends Component {


    componentDidMount() {
        //---------------------------------------------第一个图开始-------------------------------------------
        let myChartT = echarts.init(document.getElementById('top'));
        let datas = ["正常", "异常"];

        /*动态添加yAxis*/
        let yAxisData = [];
        for (let i = 0; i < datas.length; i++) {
            let item = {
                type: 'value',
                name: datas[i],
                axisLine: {
                    lineStyle: {
                        color: 'white'
                    }
                },
                splitLine: {
                    show: false     //去掉网格线
                },
                nameTextStyle: {
                    color: 'white'
                },
            };
            yAxisData.push(item);
        }


        let option = {
            baseOption: {
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    //     type: 'cross',
                    //     color:'red',
                    //     crossStyle: {
                    //         color: 'gray'
                    //     }
                    // }
                },
                legend: {
                    data: ['正常', '异常'],
                    orient: 'horizontal',
                    x: 'right',
                    textStyle: {
                        color: "white"
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white'
                            }

                        },
                        axisLabel: {
                            interval: 0,
                        }
                    }
                ],
                yAxis: yAxisData,
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        itemStyle: {
                            color: '#11c0ff'
                        },
                    },
                    {
                        name: '异常',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
                        itemStyle: {
                            color: 'yellow'
                        },
                    }
                ]
            }
        };
        myChartT.setOption(option);
        //---------------------------------------------第一个图结束-------------------------------------------
        //---------------------------------------------第二个图开始-------------------------------------------
        let myChartB = echarts.init(document.getElementById('bottom'));
        let leeds = [{name: '正常', data: '220', color: '#e04b4d'}, {name: "异常", data: '340', color: "#8a7db5"}];
        let baseSeries = [];
        for (let i = 0; i < leeds.length; i++) {
            let item = {
                name: leeds[i],
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    },
                },
                data: [leeds[i].data],
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}',
                },
                itemStyle: {
                    color: leeds[i].color
                },
            };
            baseSeries.push(item);
        }

        let option1 = {
            legend: {
                data: ['正常', '异常'],
                orient: 'horizontal',
                x: 'right',
                textStyle: {
                    color: "#fff"
                },
            },
            xAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: false     //去掉网格线
                    },
                },

            ],
            yAxis:
                {
                    show: true,
                    type: 'category',
                    axisTick: {show: false},
                    data: [],
                    axisLine: {
                        lineStyle: {
                            color: 'white'
                        }
                    },

                },
            series: baseSeries
        };
        myChartB.setOption(option1);

        //---------------------------------------------第二个图结束-------------------------------------------
    }

    render() {
        return (

            <div className="layout_left_bottom">
                <div className="nav"><span className="nav_left"/> <span
                    className="nav_cont">图像录像统计</span> <span className="nav_right"/></div>
                <div className="data-box2" style={{border: "1px solid green"}}>
                    <i className="topL"/>
                    <i className="topR"/>
                    <i className="bottomL"/>
                    <i className="bottomR"/>
                    <div style={{position: 'absolute', margin: '20px'}}>
                        <span className="span-left-top">图像质量统计</span><br/>
                        <span className="span-left-number">12.73/</span>
                        <span className="span-left-number1">2222</span>
                    </div>


                    <div style={{position: 'absolute', margin: '20px', top: '310px'}}>
                        <span className="span-left-top">录像存储情况</span><br/>
                        <span className="span-left-number">12.73/</span>
                        <span className="span-left-number1">2222</span>
                    </div>
                    <div className="left_bottom_con" id="top">

                    </div>


                    <div className="left_bottom_bom" id="bottom"/>

                </div>
            </div>
        );
    }
}

export default LeftBottom;
